<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用中央事件总线bus实现任何组件间的通信</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <h2>使用中央事件总线bus实现任何组件间的通信</h2>


        <p>父组件的值： {{message}}</p>

        <my-component></my-component>
    </div>
</body>

<script type="text/javascript">
    // 创建一个空的 vue 实例作为中央事件总线
    var bus = new Vue();

    // 注册组件
    Vue.component('my-component', {
        template:'<button @click="handleEvent">传递事件</button>',
        methods:{
            handleEvent: function(event){
                bus.$emit('on-message', "来自my-component子组件的消息");
            }
        }
    });

    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app",
        data:{
            message:"使用中央事件总线bus实现任何组件间的通信"
        },
        mounted: function(){
            var _this = this;

            // 在实例化初始化时，监听来自 bus 实例的事件
            bus.$on("on-message", function(msg){
                _this.message = msg;
            })
        }
    })
</script>

</html>